import React, { Component } from 'react';
import { Tabs, WhiteSpace } from 'antd-mobile';
import { StickyContainer, Sticky } from 'react-sticky';
import { getSingList } from '../../api/index'
import {getSingList2} from '../../api/index'
import { withRouter } from "react-router-dom"
import { Flex } from 'antd-mobile';
import './singList.css/banner.css'
function renderTabBar(props) {
    return (<Sticky>
        {({ style }) => <div style={{ ...style, zIndex: 1 }}><Tabs.DefaultTabBar {...props} /></div>}
    </Sticky>);
}
const tabs = [
    { title: '推荐' },
    { title: '精品' },
    { title: '华语' },
    { title: '电子' },
    { title: '轻音乐' },
    { title: '民谣' },
    { title: '摇滚' }
];
class Banner extends Component {
    constructor() {
        super()
        this.state = {
            arr1: [],
            arr2:[]
        }
    }
    componentDidMount() {
        getSingList().then(res => {
            // console.log(res)
            this.setState({
                arr1: res.data.playlists
            })
        })
        getSingList2().then(res=>{
            // console.log(res)
            this.setState({
                arr2: res.data.playlists
            })
        })      
    }
    go(id){
        this.props.history.push('/newSing',{id:id})
    }
    render() {
        // console.log(this.state.arr1)
        return (
            <div>
                <WhiteSpace />
                <StickyContainer>
                    <Tabs tabs={tabs}
                        initalPage={'t2'}
                        renderTabBar={renderTabBar}
                    >
                        <div >
                            {this.state.arr1.map((item, index) => {
                                return (
                                    <div key={index} className='singList' onClick={this.go.bind(this,item.id)}>
                                        <Flex className='singList-one' >
                                            <Flex.Item >
                                                <img src={item.coverImgUrl} alt="" />
                                                <span>{item.name}</span>
                                                <h5>❤{Math.round(item.playCount/10000)}万</h5>
                                            </Flex.Item>
                                            
                                        </Flex>
                                    </div>
                                )
                            })}
                        </div>
                        <div >
                        {this.state.arr2.map((item, index) => {
                                return (
                                    <div key={index} className='singList' onClick={this.go.bind(this,item.id)}>
                                        <Flex className='singList-one' >
                                            <Flex.Item >
                                                <img src={item.coverImgUrl} alt="" />
                                                <span>{item.name}</span>
                                                <h5>❤{Math.round(item.playCount/10000)}万</h5>
                                            </Flex.Item>
                                            
                                        </Flex>
                                    </div>
                                )
                            })}
                        </div>
                        <div >
                        {this.state.arr2.map((item, index) => {
                                return (
                                    <div key={index} className='singList' onClick={this.go.bind(this,item.id)}>
                                        <Flex className='singList-one' >
                                            <Flex.Item >
                                                <img src={item.coverImgUrl} alt="" />
                                                <span>{item.name}</span>
                                                <h5>❤{Math.round(item.playCount/10000)}万</h5>
                                            </Flex.Item>
                                            
                                        </Flex>
                                    </div>
                                )
                            })}
                        </div>
                        <div >
                        {this.state.arr2.map((item, index) => {
                                return (
                                    <div key={index} className='singList' onClick={this.go.bind(this,item.id)}>
                                        <Flex className='singList-one' >
                                            <Flex.Item >
                                                <img src={item.coverImgUrl} alt="" />
                                                <span>{item.name}</span>
                                                <h5>❤{Math.round(item.playCount/10000)}万</h5>
                                            </Flex.Item>
                                            
                                        </Flex>
                                    </div>
                                )
                            })}
                        </div>
                        <div >
                        {this.state.arr2.map((item, index) => {
                                return (
                                    <div key={index} className='singList' onClick={this.go.bind(this,item.id)}>
                                        <Flex className='singList-one' >
                                            <Flex.Item >
                                                <img src={item.coverImgUrl} alt="" />
                                                <span>{item.name}</span>
                                                <h5>❤{Math.round(item.playCount/10000)}万</h5>
                                            </Flex.Item>
                                            
                                        </Flex>
                                    </div>
                                )
                            })}
                        </div>
                        <div >
                        {this.state.arr2.map((item, index) => {
                                return (
                                    <div key={index} className='singList' onClick={this.go.bind(this,item.id)}>
                                        <Flex className='singList-one' >
                                            <Flex.Item >
                                                <img src={item.coverImgUrl} alt="" />
                                                <span>{item.name}</span>
                                                <h5>❤{Math.round(item.playCount/10000)}万</h5>
                                            </Flex.Item>
                                            
                                        </Flex>
                                    </div>
                                )
                            })}
                        </div>
                        <div >
                        {this.state.arr2.map((item, index) => {
                                return (
                                    <div key={index} className='singList' onClick={this.go.bind(this,item.id)}>
                                        <Flex className='singList-one' >
                                            <Flex.Item >
                                                <img src={item.coverImgUrl} alt="" />
                                                <span>{item.name}</span>
                                                <h5>❤{Math.round(item.playCount/10000)}万</h5>
                                            </Flex.Item>
                                            
                                        </Flex>
                                    </div>
                                )
                            })}
                        </div>
                    </Tabs>
                </StickyContainer>
                <WhiteSpace />
            </div>
        )
    }
}

export default withRouter(Banner)